var JPlaceHolder = {
    //检测 浏览器是否支持placehoder
    _check: function () {
        return 'placeholder' in document.createElement('input');
    },
    //初始化
    init: function () {
        if (!this._check()) {
            this.fix();
        }
    },
    //修复
    fix: function () {
        // 使用jquery 获取页面所有设置了placehoder的input
        jQuery(':input[placeholder]').each(function (index, element) {
            // 获取placeholder的文字
            var self = $(this), txt = self.attr('placeholder');
            // 在input外包裹一个相对定位用的div
            self.wrap($('<div></div>').css({
                position: 'relative',
                zoom: '1',
                border: 'none',
                background: 'none',
                padding: 'none',
                margin: 'none'
            }));
            // 获取input的位置信息
            var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left'),
                fontsize = self.css('font-size');
            //alert(fontsize);
            // 在input的父元素里面加入span
            var holder = $('<span></span>').text(txt).css({
                'position': 'absolute',
                'left': pos.left + 'px',
                'top': pos.top + 'px',
                'height': h + 'px',
                'line-height': h + 'px',
                'padding-left': paddingleft + 'px',
                'font-size': fontsize,
                'color': '#aaa'
            }).appendTo(self.parent());
            // input获得焦点时 隐藏holder，失去焦点时如果input里没有内容显示holder
            self.focusin(function (e) {
                holder.hide();
            }).blur(function (e) {
                if (!self.text()) {
                    holder.show();
                    console.log('cccccccccccc')
                }
            });
            self.change(function(){

                if (self.val()) {
                    holder.hide();

                }else{
                    holder.show();
                }
            });
            // holder被点击时隐藏，input获得焦点
            holder.click(function (e) {
                holder.hide();
                self.focus();
            });
        });
    }
};
//执行
jQuery(function () {
    JPlaceHolder.init();
});